<template>
	<view class="cardstyle">
		<view class="cardBox" v-for="(item, index) in cardList" :key="index">
			<view class="menu-box">
				<image class="cardImage" :src="item.pic" mode=""></image>
			</view>
			<view class="menu-text">
				<span>{{ item.name }}</span>
			</view>
		</view>
	</view>
	<view class="cardBanner">
		<image class="cardBannerImage" src="../../../static/yongdong-banner.jpg" mode=""></image>
	</view>
</template>
<script setup>
import { ref, reactive, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getCard } from '@/common/js/api.js'

const app = getApp()
const cardList = ref([])

onLoad(() => {
	getCard().then((res) => {
		cardList.value = res.data
	}).catch((err) => {
	});

})
</script>
<style>
/* 背景 */
.cardstyle {
	padding-top: 30rpx;
	margin: 25rpx 0;
	border-radius: 20rpx;
	height: 310rpx;
	background-color: #fff;
	box-shadow: 0px 0px 40rpx -20rpx #888;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;

}

.cardBox {
	/* background: #f3f3f3; */
	height: 130rpx;
	width: 154rpx;
	display: flex;
	text-align: center;
	align-items: center;
	flex-direction: column;
}

.menu-box {
	width: 68rpx;
	height: 68rpx;
}

.menu-text {
	font-size: 24rpx;
}

.cardImage {
	width: 100%;
	height: 100%;
}

.cardBanner {
	height: 176rpx;
}

.cardBannerImage {
	width: 100%;
	height: 100%;
}
</style>
